<template>
  <div class="c" style="height: 100%; display: flex; flex-direction: column">
    <navconH5
      style="background-color: #fff"
      texts="学校信息"
      :leftShow="true"
    />

    <div v-if="authority([4])">
      
      <t-message
        theme="success"
        class="shoolmessage successs"
        v-if="shoolObj.class_session_status == 1"
        v-model="visible"
        content="已开课"
      />
      <t-message
        v-else-if="shoolObj.class_session_status == 2"
        theme="error"
        class="shoolmessage errors"
        v-model="visible"
        content="异常"
      />
      <t-message
        v-else
        theme="error"
        class="shoolmessage warnings"
        v-model="visible"
        content="未开课"
      />
    </div>
    <div v-else>
      <t-message
        theme="success"
        class="shoolmessage successs"
        v-if="shoolObj.class_session_status == 1"
        v-model="visible"
        content="已完成"
      />
      <t-message
        v-else-if="shoolObj.class_session_status == 2"
        theme="error"
        class="shoolmessage errors"
        v-model="visible"
        content="异常"
      />
      <t-message
        v-else
        theme="warning"
        class="shoolmessage warnings"
        v-model="visible"
        content="待完成"
      />
    </div>
    <!-- <div
        style="display: flex; justify-content: center"
        v-if="shoolObj.frist_image"
      >
        <el-radio-button :value="false" v-if="shoolObj.frist_image"
          >首课图片</el-radio-button
        >
      </div> -->
    <div style="height: 100%; overflow-y: scroll">
      <div class="tb_lgj_boxs">
        <div class="titles">学校信息</div>
        <t-form
          ref="rulesForm"
          label-position="lefrt"
          style="font-size: 14px"
          label-align="left"
          :data="formData"
        >
        <t-form-item label="是否首课" label-width="100px">
            <el-tag type="success" v-if="shoolObj.is_image == '1'"
              >首课</el-tag
            >
            <el-tag
              type="warning"
              v-else-if="shoolObj.is_image == '2'"
              >非首课</el-tag
            >
          </t-form-item>
          <t-form-item label="学校名称" prop="school_name" name="school_name">
            {{ shoolObj.school_name }}
          </t-form-item>
          <t-form-item label="省：" prop="province" name="province">
            {{ shoolObj.province }}
          </t-form-item>
          <t-form-item label="市：" prop="municipality" name="municipality">
            {{ shoolObj.municipality }}
          </t-form-item>
          <t-form-item label="区：" prop="region" name="region">
            {{ shoolObj.region }}
          </t-form-item>
          <t-form-item label="所属机构：" prop="institution" name="institution">
            {{ shoolObj.institution }}
          </t-form-item>
          <t-form-item label="班级：">
            {{ shoolObj.region }}
          </t-form-item>
          <t-form-item label="科目：">
            {{ shoolObj.subject }}
          </t-form-item>
          <t-form-item label="课程：">
            {{ shoolObj.course }}
          </t-form-item>
          <t-form-item label="授课模式：" label-width="90px">
            {{ shoolObj.teaching_mode }}
          </t-form-item>
          <t-form-item label="课节次名称：" label-width="90px">
            {{ shoolObj.class_session_name }}
          </t-form-item>
          <t-form-item label="上课日期：">
            {{ shoolObj.calss_time }}
          </t-form-item>
          <t-form-item label="上课时间：">
            {{ shoolObj.calss_time_slot }}

          </t-form-item>
          <t-form-item label="下课时间：">
            {{ shoolObj.calss_time_last }}

          </t-form-item>
        </t-form>
      </div>
      <div class="tb_lgj_boxs">
        <div class="titles">工作信息</div>
        <t-form
          ref="rulesForm"
          label-position="lefrt"
          style="font-size: 14px"
          label-align="left"
          :data="formData"
        >
          <t-form-item label="上课志愿者：" label-width="90px">
            {{ shoolObj.volunteer_name }}
          </t-form-item>
          <t-form-item label="志愿者归属小队：" label-width="120px">
            {{ shoolObj.team || "无" }}
          </t-form-item>
          <t-form-item label="志愿者考勤">
            <el-tag type="success" v-if="shoolObj.volunteer_stauts == '1'"
              >正常</el-tag
            >
            <el-tag type="danger" v-else-if="shoolObj.volunteer_stauts == '2'"
              >异常</el-tag
            >
          </t-form-item>
          <t-form-item label="在地教师">
            {{ shoolObj.local_teachers }}
          </t-form-item>
          <t-form-item label="在地教师考勤" label-width="100px">
            <el-tag type="success" v-if="shoolObj.local_teachers_status == '1'"
              >正常</el-tag
            >
            <el-tag
              type="danger"
              v-else-if="shoolObj.local_teachers_status == '2'"
              >异常</el-tag
            >
          </t-form-item>
          <t-form-item label="异常原因">
            {{ shoolObj.abnormal_cause }}
          </t-form-item>
          <t-form-item label="课程会议链接" label-width="120px">
            <a :href="shoolObj.link" style="color: blue" target="_blank">
              <el-button type="success" size="small">观看课程</el-button>
            </a>
          </t-form-item>
          <t-form-item label="课程会议号">
            {{ shoolObj.code }}
          </t-form-item>
          <t-form-item label="督课人员">
            {{ shoolObj.zxguser_name }}
          </t-form-item>
          <t-form-item label="在地区域负责人" label-width="120px">
            {{ shoolObj.zdquser_name }}
          </t-form-item>
          <t-form-item label="在地工作人员" label-width="90px">
            {{ shoolObj.user_name }}
          </t-form-item>
          <t-form-item label="是否代课">
            <el-tag type="success" v-if="shoolObj.is_daike == '1'"
              >正常上课</el-tag
            >
            <el-tag type="danger" v-else-if="shoolObj.is_daike == '2'"
              >代课</el-tag
            >
          </t-form-item>
          <t-form-item label="代课人员">
            {{ shoolObj.duser_name }}
          </t-form-item>
          <t-form-item label="代课原因">
            <el-tag type="success" v-if="shoolObj.is_daike == '1'"
              >正常上课</el-tag
            >
            <span v-else>{{ shoolObj.daike_remarks || "无" }}</span>
          </t-form-item>
          <t-form-item label="是否暂停">
            <el-tag type="success" v-if="shoolObj.is_pause == '1'"
              >未暂停</el-tag
            >
            <el-tag type="danger" v-else-if="shoolObj.is_pause == '2'"
              >暂停</el-tag
            >
          </t-form-item>
          <t-form-item label="暂停原因">
            {{ shoolObj.pause_remarks }}
          </t-form-item>
          <t-form-item label="是否外出">
            <el-tag type="success" v-if="shoolObj.is_waichu == '1'"
              >正常</el-tag
            >
            <el-tag type="danger" v-else-if="shoolObj.is_waichu == '2'"
              >外出</el-tag
            >
          </t-form-item>
          <t-form-item label="首课图片">
            <el-button
            v-if="shoolObj.frist_image"
              type="success"
              size="small"
              @click="imageShows(shoolObj)"
              >查看</el-button
            >
            <span v-else>未上传</span> 
          </t-form-item>
          <t-form-item label="督课人员备注" label-width="100px">
            {{ shoolObj.remarks || "无" }}
          </t-form-item>
          <t-form-item label="在地人员备注" label-width="100px">
            {{ shoolObj.zremarks || "无" }}
          </t-form-item>
        </t-form>
      </div>
    </div>

    <BottomAdd v-if="authority([3, 4, 5])">
      <!-- 在地区域负责人 -->
      <div
        class="boxs_bov_buttons"
        v-if="authority([3]) || user?.is_qstatus == 2"
      >
        <el-button @click="zjduke()" plain style="width: 100%; height: 40px"
          >转交督课</el-button
        >
        <el-button
          @click="zjdaike()"
          type="primary"
          plain
          style="width: 100%; height: 40px"
          >转交代课</el-button
        >
        <el-button
          @click="bj()"
          type="primary"
          style="width: 100%; height: 40px"
          >编辑</el-button
        >
        <el-button
          style="width: 100%; height: 40px"
          type="danger"
          @click="deletes"
          >删除</el-button
        >
      </div>
      <div class="boxs_bov_buttons">
        <!-- <el-button
          @click="duketx()"
          type="primary"
          style="width: 100%; height: 40px"
          v-if="authority([4,5]) && ((user.id === shoolObj.zxguser_id)||(user.id === shoolObj.user_id))"
          >{{ authority([5]) ? "督课信息填写" : "在地编辑" }}</el-button
        > -->
        <el-button
          @click="duketx()"
          type="success"
          style="width: 100%; height: 40px"
          v-if="authority([4]) && user.id == shoolObj.user_id"
          >在地编辑</el-button
        >
        <el-button
          @click="duketx()"
          type="success"
          style="width: 100%; height: 40px"
          v-if="authority([5]) && user.id == shoolObj.zxguser_id"
          >督课信息填写</el-button
        >
        <el-button
          @click="shokesedit(shoolObj)"
          type="success"
          plain
          style="width: 100%; height: 40px"
          v-if="authority([5]) && shoolObj.is_image == 1"
          >首课上传</el-button
        >
        <el-button
          v-if="authority([4])"
          @click="waic()"
          :type="shoolObj.is_waichu == '1' ? '' : 'danger'"
          :disabled="shoolObj.is_waichu == '2'"
          style="width: 100%; height: 40px"
          >{{ shoolObj.is_waichu == "1" ? "选择外出" : "当前外出" }}</el-button
        >
      </div>
    </BottomAdd>

    <div v-if="authority([3]) || user?.is_qstatus == 2">
      <!-- 在线管理员操作 编辑-->
      <addOnlineVue ref="addModuleShool" @endForm="apiUpdate"> </addOnlineVue>

      <!-- 代课 -->
      <addModuleShoolDk
        ref="addModuleShoolDk"
        @endForm="refreshData_daike"
      ></addModuleShoolDk> 
      <!-- 督课 -->
      <addModuleShoolDuke
        ref="addModuleShoolDuke"
        @endForm="refreshData_duke"
      ></addModuleShoolDuke>
      <!-- 督课填写 -->
    </div>
    <div v-if="authority([4, 5])">
      <Dukexx ref="addonlinexx" @endForm="apiUpdate" />
    </div>
  </div> 
  <t-image-viewer v-model:images="imageUrl" v-model:visible="imagsShow"></t-image-viewer>
  <shoke ref="shokeModuleFlag" @getData="refreshData"></shoke>
</template>
      
      <script>
import {
  timetableEdit,
  timetableDel,
  statuss,
  schewaichu,
  updatedaike,
  updateduke,
  caicount,
  timetableUpdate,
} from "@/api/api";
import { setStorage, getStorage } from "@/utils/util";
import BottomAdd from "@/components/bottom_add.vue";
import addOnlineVue from "@/components/h5com/shool/addOnline.vue"; //编辑
import addModuleShoolDk from "@/components/h5com/shool/zjdk.vue"; //转交代课

import addModuleShoolDuke from "@/components/h5com/shool/zjduk.vue"; //转交督课
//  addonlinexx
import Dukexx from "@/components/h5com/shool/addonlinexx.vue";
import shoke from "../h5manage/components/shoke.vue"; //首课上传误删

import navconH5 from "@/components/navconH5.vue";
//   import addModuleShool from "./components/addShool.vue"; //在地和在地区域的新增
//   import DiaoLogShool from "./components/diaologShool.vue";
export default {
  components: {
    BottomAdd,
    addModuleShoolDk,
    addModuleShoolDuke,
    addOnlineVue,
    Dukexx,
    shoke,
    navconH5,
  },
  data() {
    return {
      imagsShow: false,
      visible: true,
      imageUrl: [],
      
      user: {},
      id: this.$route.query.id,
      shoolObj: {},
      isCollapse: false,
      userInfo: "", //用户权限id
    };
  },
  watch: {
    isCollapse(val) {
      this.pausevideo();
    },
  },
  mounted(o) {
    // //console.log(o,'----------o') 
    this.ShoolDatails();
  },
  created(o) {
    this.userInfo = Number(JSON.parse(getStorage("groupId"))); //权限
    // this.ShoolDatails();
  },
  methods: {
   
    imageShows(row) {
        this.imagsShow = true;
        this.imageUrl = [row.frist_image];
      },
    shokesedit(row) {
      // 首课上传
      this.$refs.shokeModuleFlag.addPlan(row);
    },
    waic(val) {
      let vm = this;

      vm.$dialog.confirm({
        title: "外出确定",
        content: `是否确认外出？`,
        confirmBtn: "确认",
        cancelBtn: "取消",
        onConfirm: () => {
          return schewaichu({ ids: vm.shoolObj.id }).then((res) => {
            if (res.code == 1) {
              vm.$message.success(res.msg);
              vm.ShoolDatails();
            } else {
              vm.$message.warning(res.msg);
            }
          });
        },
      });
    },
    duketx() {
      // 督课填写
      this.$refs.addonlinexx.editupdata(
        this.shoolObj,
        `${this.authority([4]) ? "在地督课" : "督课信息"}`,
        []
      );
    },
    bj() {
      this.$refs.addModuleShool.editupdata(this.shoolObj, "编辑");
    },
    deletes() {
      // 删除
      let vm = this;
      vm.$dialog.confirm({
        title: "删除警告",
        content: `您确定要删除该督课吗？`,
        confirmBtn: "确认",
        cancelBtn: "取消",
        onConfirm: () => {
          return timetableDel({ id: this.shoolObj.id }).then((res) => {
            if (res.code == 1) {
              vm.$message.success(res.msg);
              vm.$router.go(-1);
            } else {
              vm.$message.warning(res.msg);
            }
          });
        },
      });
    },
    // 转交督课
    zjduke() {
      this.$refs.addModuleShoolDuke.editupdata(this.shoolObj, "督课转交");
    },
    zjdaike() {
      this.$refs.addModuleShoolDk.editupdata(this.shoolObj, "代课转交");
    },
    refreshData_daike(obj) {
      console.log(obj, "---------obj");
      updatedaike(obj).then((res) => {
        if (res.code == 1) {
          this.$message.success(res.msg);
          this.ShoolDatails();
          this.$refs.addModuleShoolDk.showPopup = false;
        } else {
          this.$message.warning(res.msg);
        }
      });
    },
    refreshData_duke(obj) {
      console.log(obj, "---------obj11111");

      updateduke(obj).then((res) => {
        if (res.code == 1) {
          this.$message.success(res.msg);
          this.ShoolDatails();
          this.$refs.addModuleShoolDuke.showPopup = false;
        } else {
          this.$message.warning(res.msg);
        }
      });
    },

    apiUpdate(obj) {
      timetableUpdate(obj).then((res) => {
        if (res.code == 1) {
          this.$message.success(res.msg);
          this.ShoolDatails();
          if (this.$refs.addModuleShool)
            this.$refs.addModuleShool.showPopup = false;
          if (this.$refs.addonlinexx) this.$refs.addonlinexx.showPopup = false;
        } else {
          this.$message.warning(res.msg);
        }
      });
    },
    refreshData() {
      this.ShoolDatails();
    },
    authority(groupArr = [0]) {
      // 权限筛选
      let userInfo = this.userInfo;
      // 当前权限和传来的权限组进行对比
      if (groupArr.some((item) => Number(item) === userInfo)) return true;
      return false;
    },
    // 获取基础学校数据
    ShoolDatails() {
      timetableEdit({ id: this.id }).then((res) => {
        this.user = { ...res.data.user };
        delete res.data.user;
        this.shoolObj = res.data;
        //console.log(this.user,'----this.user')
      });
    },
  },
};
</script>
      
  <style>
.c {
  background: rgb(241, 241, 241) !important;
}
.el-form-itemse {
  min-width: 40%;
}
.h5_school_details {
  padding: 15px;
  box-sizing: border-box;
  /* background: #fff; */
}

.shoolmessage {
  position: inherit !important;
  box-sizing: border-box;
  border: none;
}
.infos {
}
</style>
  <style lang="scss"  >
.successs {
  background: #e2fff8 !important;
  color: #49b9ad !important;
  .t-message__text {
    color: #49b9ad !important;
  }
}
.warnings {
  background: #fef1f1 !important;
  color: #f6a055 !important;
  .t-message__text {
    color: #f6a055 !important;
  }
}
.infos {
  background: #f3f1fe !important;
  color: #147df5 !important;
  .t-message__text {
    color: #147df5 !important;
  }
}
.errors {
  background: #fef1f1 !important;
  color: #f65755 !important;
  .t-message__text {
    color: #f65755 !important;
  }
}

.tb_lgj_boxs {
  background: #fff;
  margin-bottom: 10px;
  .titles {
    padding: 15px;
    color: #1c2023;
    font-weight: 600;
  }
}
</style>
   